{# empty Twig template #}


    <link rel="stylesheet" href="{{ asset('bootstrap/css/smoothness/jquery-ui-1.10.3.custom.min.css') }}" />
    <style>
        body {}
        #wrap {}
        #external-events {
                float: left;
                padding: 10px 10px 10px 10px;
                /*border: 1px solid #ccc;
                background: #eee;*/
                text-align: left;
                }
        #external-events h4 {
                font-size: 16px;
                margin-top: 0;
                padding-top: 1em;
                }
        .external-event { /* try to mimick the look of a real event */
                margin: 10px 0;
                padding: 2px 4px;
                background: #3366CC;
                color: #fff;
                font-size: .85em;
                cursor: pointer;
                }
        #external-events p {
                margin: 1.5em 0;
                font-size: 11px;
                color: #666;
                }
        #external-events p input {
                margin: 0;
                vertical-align: middle;
                }

    </style>

{% block javascriptsHeader %}
    <script src="{{ asset('bootstrap/js/jquery-1.9.1.js') }}"></script>
    <script src="{{ asset('bootstrap/js/jquery-ui-1.10.3.custom.min.js') }}"></script>
    <script src="{{ asset('bootstrap/js/fullcalendar.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $('#calendar').fullCalendar({
                allDaySlot: false,
                height: 685.233,
                header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'basicWeek, agendaWeek'
                },
                monthNames:['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre',
                            'Octubre','Noviembre','Diciembre'],
                monthNamesShort:['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
                dayNames:['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
                titleFormat:{
                    day: 'dddd, d MMM, yyyy'
                },
                buttonText: {
                    prev:     '&lsaquo;', // <
                    next:     '&rsaquo;', // >
                    prevYear: '&laquo;',  // <<
                    nextYear: '&raquo;',  // >>
                    today:    'hoy',
                    month:    'mes',
                    week:     'semana',
                    day:      'día'
                },
                defaultView: 'agendaWeek',
                events: "{{ path('avisos_calendario_jsondata') }}",
                allday:false,
                eventClick: function(event, element) {
                    var link = event.reservar;
                    $('#reservarDia').load(link);
                }
            });

        });
    </script>
{% endblock %}

    {% block body %}
    
        <div class="row-fluid">
            <div class="span6">
                <div class="mini-layout fluid">
                    <div class="mini-layout-header">
                        <i class="icon-calendar"></i>
                        <span>Días disponibles a recuperar</span>
                    </div>
                    <div class="mini-layout-body">
                        <div id='calendar' class="calendar"></div>
                        <div style='clear:both'></div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="mini-layout fluid">
                    <div class="mini-layout-header">
                        <i class="icon-share-alt"></i>
                        <span>Asignar a alumno</span>
                    </div>
                    <div class="mini-layout-body" id="reservarDia">    
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
